<template>
  <div>
    <x-header style="background-color:#f7fcf6;border-bottom: 1px solid #e2e2e2;"
              :left-options="{backText:'',showBack: true}">{{title}}
    </x-header>

    <group>
      <cell title="物流信息" is-link  v-show="liuShow"></cell>
    </group>

    <br/>

    <form-preview :header-label="cost" :header-value="money" :body-items="list"
                  :footer-buttons="buttons2"></form-preview>
    <group>
      <cell title="实付金额：" value-align="left"><span style="color: red">{{goodsOrder.orderAmount}}</span>（在线支付）</cell>
      <cell title="收货地址：" value-align="left">
        {{goodsOrder.userAddress.province}}{{goodsOrder.userAddress.city}}{{goodsOrder.userAddress.area}}{{goodsOrder.userAddress.address}}
      </cell>
      <cell title=" 收货人：" value-align="left">
        {{goodsOrder.userAddress.name}} {{goodsOrder.userAddress.phone}}
      </cell>
      <cell title="配送方式" value-align="left">
        {{goodsOrder.logisticsCompany}}
      </cell>
    </group>

    <group>
      <x-button type="warn"  v-show="delShow" @click.native="delet(goodsOrder.id)">删除订单</x-button>
    </group>
    <toast v-model="success">{{message}}</toast>
    <toast v-model="error" type="warn">{{errorMessage}}</toast>
  </div>
</template>

<script>
  import {XHeader, XButton, Cell, Group, Loading, FormPreview, Toast,Confirm} from 'vux'
  import common from '../services/common';
  export default {
    data() {
      return {
        goodsOrder: [],
        zhifu: false,
        message: "成功",
        errorMessage: "失败",
        success: false,
        error: false,
        delShow:false,
        liuShow:false,
        form: {
          orderId: "",
          type: 1,
        },
        title: "兑换",
        cost: "逗米数量",
        money: "",
        list: [],
        buttons2: []
      }
    },
    components: {
      XHeader,
      XButton,
      Cell, Group,
      Loading,
      FormPreview,
      Toast,
      Confirm
    },
    mounted: function () {
      this.goodsOrder = JSON.parse(common.getStorage("goodsOrder"));
      if(this.goodsOrder.status == 2){
        this.title = "订单详情";
        this.delShow=true;
        this.liuShow=true;
        this.buttons2.push({
          text: '已完成',
        });
      }else if (this.goodsOrder.status == 1) {
        this.title = "订单详情";
        if(this.goodsOrder.logisticsCode){
            this.liuShow=true;
        }
        this.buttons2.push({
          text: '已支付',
        });
      } else {
        this.buttons2.push({
          text: '兑换',
          onButtonClick: (name) => {
            this.douMiPay();
          }
        });
      }

      this.list.push({
        label: '商品名称',
        value: this.goodsOrder.goods.name,
      });

      this.list.push({
        label: '订单号',
        value: this.goodsOrder.orderCode,
      });

      this.list.push({
        label: '下单时间',
        value: this.goodsOrder.createTime,
      });

      this.money = '¥' + this.goodsOrder.goods.price + "x" + this.goodsOrder.goodsCount;

      if(this.goodsOrder.logisticsCode){
        let split = this.goodsOrder.logisticsCode.split(',');
      }
    },
    methods: {
      delet(id){
        this.form.orderId  = id;
        const form = this.form;
        console.log(form);
        this.$vux.confirm.show({
          title: '操作提示',
          content: '确认取消订单吗？',
          onConfirm () {
            common.post(common.getRequestData("goodsOrderDel", form), (res) => {
              if (res.data.responseCode == '0000') {
               console.log(res.data)
              } else {
                this.error = true;
                this.errorMessage = res.data.responseMsg;
              }
            }, false);
          }
        })
      },
      douMiPay(){
        this.form.orderId = this.goodsOrder.id;
        common.post(common.getRequestData("paymentOrder", this.form), (res) => {
          if (res.data.responseCode == '0000') {
            if (res.data.data > 0) {
              this.success = true;
              this.message = "支付成功，订单会在3天内发货";
              setTimeout(() => {
                this.$router.push('/order_list')
              }, 3000);
            }
          } else {
            this.error = true;
            this.errorMessage = res.data.responseMsg;
          }
        }, false);
      }
    }
  }
</script>



